<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒计时</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      background: skyblue;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #box {
      font-size: 64px;
      font-weight: bold;
      color: transparent;
      background-color: blue;
      text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px, rgba(255, 255, 255, 0.2) 1px 3px 3px;
      -webkit-background-clip: text;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    //倒计时：获取时间差，然后转换成对应的数值
    function diffTime(currentTime, targetTime) {
      //获取当前时间
      var currentTime = new Date();
      //获取时间差(秒)
      var diffS = Math.ceil((targetTime.getTime() - currentTime.getTime()) / 1000);
      //获取相差的天数
      var day = Math.floor(diffS / (24 * 60 * 60));
      //获取相差的小时数
      var hour = Math.floor(diffS % (24 * 60 * 60) / (60 * 60));
      //获取相差的分钟数
      var min = Math.floor(diffS % (60 * 60) / 60);
      //获取相差的秒数
      var seconds = Math.floor(diffS % 60);

      var obj = {
        day: day,
        hour: hour,
        min: min,
        seconds: seconds
      }
      return obj;

    }
    var targetTime = new Date("2023-4-28 18:00:00");
    //创建一个定时器，用于实现动态的倒计时
    setInterval(() => {
      // 每隔1秒获取当前时间
      var currentTime = new Date();

      var res = diffTime(currentTime, targetTime);

      //通过innerHTML将内容显示到页面上
      box.innerHTML = `距离五一放假还剩${res.day}天${res.hour}时${res.min}分${res.seconds}秒`
    }, 1000);
  </script>
</body>

</html>